<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
<div id="app">
    <h1>index.html</h1>
    <input type="button" value="测试ajax" @click="testAjax()">
    <input type="button" value="@ResquestBody测试ajax" @click="testResquestBody()"><br>
    <a th:href="@{/test/ResponseBody}">测试ResponseBody注解响应浏览器数据</a>
    <input type="button" value="@ReesponseBody测试ajax" @click="testResponseBody()">
    <hr>
    <a th:href="@{/test/down}">下载img</a><br>
    <form th:action="@{/test/up}" method="post" enctype="multipart/form-data">
        头像：<input type="file" name="photo"><br>
        <input type="submit" value="上传">
    </form>
</div>


<script type="text/javascript" th:src="@{/static/js/vue.js}"></script>
<script type="text/javascript" th:src="@{/static/js/axios.min.js}"></script>
<script type="text/javascript">
    /*
    *  axios({
          url:"",//请求路径
          method: "",//请求方式
          params:{},//以name=value&name=value的方式发送请求参数
          //不管使用的请求方式是get还是post，请求参数都会拼接到请求地址后
          //此种方式的请求参数可以通过request.getParameter()获取
           data:{},//以json格式发送的请求参数
           //请求参数会被保存到请求报文的请求体传输到服务器
           //此种方式的请求参数不可以通过request.getParameter()获取
        }).then(response=>{
            console.log(response.data);
       });
    * */

    var vue = new Vue({
        el:"#app",
        methods:{
            testAjax(){

                axios.post(
                    "/springmvc/test/ajax?id=1001",
                    {username:"admin",password:"1234546"}
                ).then(response=>{
                    console.log(response.data);
                });
                // axios({
                //     url:"",
                //     method: "",
                //     params:{},
                //     data:{}
                // }).then(response=>{
                //     console.log(response.data);
                // });
            },
            testResquestBody(){
                axios.post(
                    "/springmvc/test/RequestBody/json",
                {username:"admin",password:"1234546",age:23,gender:"男"}
                ).then(response=>{
                    console.log(response.data);
                })
            },
            testResponseBody(){
                axios.post(
                    "/springmvc/test/ResponseBody/json"

                ).then(response=>{
                    console.log(response.data);
                })
            }
        }

    });
</script>
</body>
</html>